<template>
  <TForm v-model="formData" :columns="formColumns" @onFinish="onSubmit" @onReset="onReset" :formProps="formProps">
    <template #test3_form_item>
      <el-form-item 
        label="远程搜索框" 
        prop="test3"
        :rules="[    
          { required: true, message: '请输入内容', trigger: 'blur' },
        ]">
        <el-autocomplete
          v-model="formData.test3"
          :fetch-suggestions="querySearch"
          clearable
          class="inline-input w-50"
          placeholder="请输入内容搜索"
          @select="handleSelect"
        />
      </el-form-item>
    </template>
    <template #test4_form_item>
      <el-form-item label="组件联动">
        <el-radio-group v-model="formData.test4">
          <el-radio value="1" label="1">内容隐藏</el-radio>
          <el-radio value="2" label="2">内容展示</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <template #test5_form_item>
      <el-form-item label="联动内容" v-if="formData.test4 === '2'">
        <el-input v-model="formData.test5" placeholder="请输入内容" />
      </el-form-item>
    </template>
    <template #test6_form_item>
      <div class="flex mb-18px">
        <div class="flex items-center font-size-14px">自定义区域：</div>
        <div>
          <el-input v-model="formData.test6" placeholder="请输入内容" />
        </div>
        <div>
          <el-input v-model="formData.test7" placeholder="请输入内容" />
        </div> 
      </div>
    </template>
  </TForm>
</template>

<script lang="ts" setup>
import { TForm, TFormColumns, TFormProp } from '@twa/components'
import { onMounted, ref } from 'vue'

const formData:any = ref({ // 初始化数据
  test3: '',
  test4: '1',
  test5: '',
  test6: '',
  test7: '',
})
const formProps = ref<TFormProp>({
  labelWidth: '128px'
})
function onReset(){
  console.log('onReset', formData.value)
}
function onSubmit(){
  console.log('onSubmit', formData.value)
}
const formColumns = ref<TFormColumns[]>([
  { 
    label: '输入框', 
    prop: 'test1',
    valueType: 'input',
    defaultValue: '默认值',
    formItemProps: {
      rules: [    
        { required: true, message: '请输入内容', trigger: 'blur' },
        { min: 1, max: 15, message: '内容长度最小为1，最大值为15', trigger: 'blur' },
      ]
    }
  },
  { 
    label: '日期选择', 
    prop: 'test2',
    valueType: 'date',
  },
  { 
    label: '输入远程搜索',
    prop: 'test3',
  },
  { 
    label: '组件联动',
    prop: 'test4',
  },
  { 
    label: '被联动内容',
    prop: 'test5',
  },
  { 
    label: '自定义区域',
    prop: 'test6',
  },
])

// 远程搜索框相关方法
const restaurants: any = ref([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const handleSelect = (item) => {
  console.log('handleSelect', item)
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}

onMounted(() => {
  restaurants.value = loadAll()
})
</script>